<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<!-- 
    显示动画：show()
        1.如果show()没有参数就没有动画效果直接显示
        2.参数：
            2.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            2.2代表动画执行完之后的回调函数
        例子：
            $('#div1').show(2000,function(){
                alert('动画执行完毕');
            })
    隐藏动画：hide()
        1.如果hide()没有参数就没有动画效果直接隐藏
        2.参数：
            2.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            2.2代表动画执行完之后的回调函数
        例子：
            $('#div1').hide(2000,function(){
                alert('动画执行完毕');
            })
    切换动画:toggle()
        1.如果toggle()没有参数就没有动画效果直接切换
        2.参数：
            2.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            2.2代表动画执行完之后的回调函数
        例子：
            $('#div1').toggle(2000,function(){
                alert('切换成功');
            })
    划入动画：slideDown()
        1.参数：如果没有参数则会默认第一个参数为normal
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表动画执行完之后的回调函数
        例子：
            $('#div1').slideDown(2000,function(){
                alert('划入');
            })
    划出动画:slideUp()
        1.参数：如果没有参数则会默认第一个参数为normal
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表动画执行完之后的回调函数
        例子：
            $('#div1').slideUp(2000,function(){
                alert('划出');
            })
    切换划：slideToggle();
        1.参数：如果没有参数则会默认第一个参数为normal
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表动画执行完之后的回调函数
        例子：
            $('#div1').slideToggle(2000,function(){
                alert('切换');
            })
    淡入动画：fadeIn();
        1.参数：如果没有参数则会默认第一个参数为normal
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表动画执行完之后的回调函数
        例子：
            $('#div1').fadeIn(2000,function(){
                alert('淡入');
            })
    淡出动画:fadeOut();
        1.参数：如果没有参数则会默认第一个参数为normal
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表动画执行完之后的回调函数
        例子：
            $('#div1').fadeOut(2000,function(){
                alert('淡出');
            })
    淡入出切换：fadeToggel();
        1.参数：如果没有参数则会默认第一个参数为normal
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表动画执行完之后的回调函数
        例子：
            $('#div1').fadeToggel(2000,function(){
                alert('切换完成');
            })
    淡入到哪里：tadeTO();
        1.参数：
            1.1代表执行动画的时长 可以是毫秒数，也可以是代表时长的字符串(fast相当于200毫秒 normal相当于400毫秒 slow相当于600毫秒)，
                                如果代表时长的单词写错了相当于写了一个normal
            1.2代表淡入程度       相当于是给标签一个动画结束后opacity的最终值
            1.3代表动画执行结束后的回调函数
        例子：
            $('#div1').tadeTo(2000,.5,function(){
                alert('淡入程度0.5')
            })
    自定义动画：animate();
        1.参数
            1.1必选的   对象        代表的是需要做动画的属性
            1.2可选的   时间        代表执行动画的时长
            1.3可选的   速度        代表缓动还是匀速（linear匀速 swing先慢后快），默认物体是缓动swing
            1.4可选的   回调函数    代表回调函数
        例子：
            $('#div1').animate({
                left:800,
                width:200
            },2000,'linear',funtion(){
                alert('自定义动画执行完成')；
            });
    动画队列：stop();
        1.参数
            1.1可选     是否清楚动画队列（默认是false）
            1.2可选     是否跳转到最总结果（默认是false）
        例子：
            $('#div1').stop(true,true);
        常用stop(true，false)

 -->